<template>
  <div id="app" style="overflow: hidden;">
    <div class="" style="z-index: 102">
      <my-header title="艺人详情" title-color="white" headerBg="black">
        <img slot="left" src="../../assets/back.png" style="margin-top: 0;width: 0.5rem;height: 0.5rem" @click="goback()">
      </my-header>
    </div>
    <div class="topContent" >
      <div class="leftContent">
        <img :src="artistData?artistData.artistPicPath:''" alt="" class="img1">
        <div class="statusImg">
          <img src="../../../static/artist_detail/per_phone@2x.png" alt="">
          <img src="../../../static/artist_detail/baozheng@2x.png" alt="">
          <img src="../../../static/artist_detail/idp@2x.png" alt="">
        </div>
      </div>
      <div class="rightContent">
        <div class="row2">
          <span><b>{{artistData?artistData.aName:''}}</b></span>
        </div>
        <div class="row1">
          <span>年龄:{{artistData?artistData.aAge:''}}</span>
          <span>粉丝:{{artistData?artistData.aFansNum:''}}</span>
        </div>
        <div class="row1">
          <span>体重:{{artistData?artistData.aWeight:''}}kg</span>
          <span>身高:{{artistData?artistData.aHeight:''}}cm</span>
        </div>
        <div class="row2">
          <span>角色:{{artistData?artistData.aJob:''}}</span>
        </div>
        <div class="row2">
          <span>定金比例:{{artistData?artistData.aRate:''}}%</span>
        </div>
      </div>

    </div>
    <div class="picContent" style="margin-bottom: 1rem">
      <p v-for="item in picList" style="margin-bottom: 0.2rem;">
        <img :src="item.apPicPath" alt="" class="picCC">
      </p>
      <my-devider></my-devider>
      <my-intro title="擅长" :content="artistData?artistData.aAdept:''"></my-intro>
      <my-intro title="个人简介" :content="artistData?artistData.aInfo:''"></my-intro>
      <my-intro title="演出视频" v-show="videoList?videoList.length:false">
        <div slot="right">
          <p v-for="item in videoList">
            <img :src="item.vpicPath">
          </p>
        </div>
      </my-intro>
      <my-intro title="服务城市" :content="artistData?artistData.aServiceCity:''"></my-intro>
      <my-intro :title="'评价('+(commentList?commentList.length:0)+')'">
        <div slot="right">
          <div v-if="commentList">
            <div v-for="item in commentList" class="commentClass">
              <img :src="item.coPicPath">
              <div class="rightCom">
                <div class="commentRow1">
                  <span>{{item.coBName}}</span>
                  <span>{{item.coCreateTime}}</span>
                </div>
                <div class="commentRow2">
                  <span>{{item.coContent}}</span>
                </div>
              </div>
              <div class="dividerCom"></div>
            </div>
          </div>
        </div>
      </my-intro>
    </div>
    <!--底部导航栏-->
    <my-bottom :aId="aId"></my-bottom>
  </div>
</template>
<script>
  import header from 'common/vue/Header.vue'
  import API from '../../../config/api/API'
  import devider from 'common/vue/divider.vue'
  import intro from 'common/vue/intro.vue'
  import detailBot from './ArtistDetailBottom.vue'

  var api = new API();

  export default {
    data() {
      return {
        dataList: [],
        aId: '',
        artistData: null,
        picList: null,
        videoList: null,
        commentList: null
      }
    },
    components: {
      'my-header': header,
      'my-devider': devider,
      'my-intro': intro,
      'my-bottom': detailBot
    },
    created () {
      this.aId = this.getQueryString("artistId");
      console.log('aId is', this.aId)
      this.getArtistDetail();
      this.getArtistCommentData();
      this.getArtistPicData();
      this.getArtistVideoData();
    },
    mounted () {

    },
    watch: {

    },
    methods: {
      goback(){
        window.history.back()
      },
      getArtistDetail() {
        var that = this
        api.getList("app/artist/getArtistById",{
          "tokenContent":window.localStorage['token'],
          "artistId":that.getQueryString("artistId"),
        }).then(function (res) {
          console.log(res.data)
          that.artistData = res.data.artist
        })
      },
      getArtistPicData() {
        var that = this
        api.getList("app/artistphoto/getArtistPhotoByAId",{
          "tokenContent":window.localStorage['token'],
          "aId":that.getQueryString("artistId"),
          "pageNum":"1",
          "pageSize":"3"
        }).then(function (res) {
//          console.log(res.data)
          that.picList = res.data.pageInfo.list
        })
      },
      getArtistVideoData() {
        var that = this
        api.getList("app/video/getVideoByAId",{
          "tokenContent":window.localStorage['token'],
          "aId":that.getQueryString("artistId"),
          "pageNum":"1",
          "pageSize":"3",
          "status":"0"
        }).then(function (res) {
//          console.log(res.data)
          that.videoList = res.data.pageInfo.list
        })
      },
      getArtistCommentData() {
        var that = this
        api.getList("app/comment/getCommentByAId",{
          "tokenContent":window.localStorage['token'],
          "aId":that.getQueryString("artistId"),
          "pageNum":"1",
          "pageSize":"10"
        }).then(function (res) {
          console.log(res.data)
          that.commentList = res.data.pageInfo.list
          for (var i=0; i<that.commentList.length;i++) {
            var nowStr = that.commentList[i].coCreateTime + "";
//            nowStr = nowStr.substring(0,10);

            that.commentList[i].coCreateTime = that.formatDate(Number(nowStr));
            console.log('====================', that.commentList[i].coCreateTime)
          }
        })
      },
      getQueryString (name) {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        const r = window.location.search.substr(1).match(reg)
        if (r != null) return r[2]; return null
      },
      formatDate(timeStamp)   {
        var now=new Date(timeStamp);
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        var date=now.getDate();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var second=now.getSeconds();
        //   "+hour+":"+minute+":"+second
        return year+"-"+month+"-"+date;
      }
    }
  }

</script>
<style lang="less" rel="stylesheet/less" scoped>
  @import '../../css/artistDetail/artist_detail.less';
  html,body{
    background-color: #f3f3f3!important;
    width: 100%;
  }
</style>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
  }
</style>
